<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <!--<title>7-1 Transitions动画</title>-->
    <!--<link rel="stylesheet" href="../common.css">-->
    <!--<script src="../jquery-2.2.0.js"></script>-->
    <!--<script src="../main.js"></script>-->
    <style>
        #menu{
            position: absolute;
            left:-21.5em;
            width: 20em;
            height: initial;
            padding: 15px;
            z-index: 10;
            border-radius: 15px;
            box-shadow: 2px 2px 5px 3px #292929;
            background-color: rgb(237, 255, 202);
        }
        #menu:hover{
            left:0em;
        }
        #menu h1{
            margin-top: 0;
            margin-bottom: 5px;
        }
        #menu section{
            /*
                        column-count: 2;!*分成2列*!
                        column-gap: 2rem;!*分栏的间隙宽度*!
                        column-rule: 1px dashed #f0d187;!*分栏的间隔线样式*!
            */

        }
        #menu h2{
            margin:3px auto;
            counter-increment: mycounter;
            counter-reset: mysubcounter;
            padding-left: 10px;
            font-size: 1em;
            font-weight: bold;
            text-shadow: 1px 1px 1px darkgray;
            color: #191919;
            background-color: rgba(146, 230, 169, 0.61);
        }
        #menu h2:before{
            content: "—第"counter(mycounter)"章 ";
            font-weight: bold;
            /*font-size: 1.8em;*/
        }
        #menu h2:after{
            content: "—";
            font-weight: bold;
        }
        #menu section a{
            counter-increment: mysubcounter;
            display: block;
            padding-left: 10px;
            margin: 3px 2em;
            /*font-family:  华文宋体, 宋体, serif;*/
            font-size: .8em;
            font-weight: bold;
            text-decoration: none;
            /*text-shadow: 1px 1px 1px darkgray;*/
            color: #252525;
            /*background-color: #a8e2f6;*/
        }
        #menu section a:before{
            font-size: 1em;
            content: "☞ 第"counter(mysubcounter)"节 ";
            font-weight: bold;
        }
        #menu section a:after{
            content: "";
            font-weight: bold;
        }
        #menu section a:visited{
            text-shadow:1px 1px 1px gray;
            color: #666;
        }
        #menu section a:hover{
            text-decoration:underline;
        }
        #menu a:active {test:expression(target="_blank");}
    </style>

</head>
<body>
<div id="menu">
    <h1>目 录</h1>
    <hr>
    <section >
        <h2>选择器</h2>
        <div class="subMenu">
            <a href="../01selector/01attrSelector.html">属性选择器</a>
            <a href="../01selector/02StructuralPseudoClassSelector1.html">结构性伪类选择器1</a>
            <a href="../01selector/03StructuralPseudoClassSelector2.html">结构性伪类选择器2</a>
            <a href="../01selector/04UIelementStatusPseudoClassSelector.html">UI元素状态伪类选择器</a>
            <a href="../01selector/05brotherElementSelector.html">兄弟选择器</a>
        </div>
        <h2>使用选择器在页面中插入内容</h2>
        <div class="subMenu">
            <a href="../02useSelector/01insertTextAndImg.html">插入文本和图片</a>
            <a href="../02useSelector/02insertSerialNumber.html">插入编号</a>
        </div>
        <h2>文字与字体相关样式</h2>
        <div class="subMenu">
            <a href="../03font/01textShadow.html">文字阴影——text-shadow</a>
            <a href="../03font/02wordWrap.html">文本换行——word-break</a>
            <a href="../03font/03serverFonts.html">使用服务端字体——Web Font</a>
            <a href="../03font/04clientFonts.html">显示客户端字体</a>
            <a href="../03font/05useRem.html">使用rem单位</a>
        </div>
        <h2>盒相关样式</h2>
        <div class="subMenu">
            <a href="../04boxStyle/01basicBoxTypes.html">盒的基本类型</a>
            <a href="../04boxStyle/02overflow.html">溢出控制</a>
            <a href="../04boxStyle/03boxShadow.html">盒阴影</a>
            <a href="../04boxStyle/04calculateWidthAndHeight.html">改变元素的宽高计算方法</a>
        </div>
        <h2>背景和边框相关样式</h2>
        <div class="subMenu">
            <a href="../../05backgroundAndBorder/01backgroundAttr.html">背景的新增属性</a>
            <a href="../05backgroundAndBorder/02gradientBackground.html">渐变背景</a>
            <a href="../05backgroundAndBorder/03borderRadius.html">圆角边框的绘制</a>
            <a href="../05backgroundAndBorder/04borderImg.html">使用边框图像</a>
        </div>
        <h2>CSS3中的变形处理</h2>
        <div class="subMenu">
            <a href="../06_2dAnd3d/01_2d.html">2D变形</a>
            <a href="../06_2dAnd3d/02_3d.html">3D变形</a>
            <a href="../06_2dAnd3d/03transformatioMatrix.html">变形矩阵</a>
        </div>
        <h2>CSS3中的动画功能</h2>
        <div class="subMenu">
            <a href="../07animation/01Transitions.html">Transitions动画</a>
            <a href="../07animation/02animations.html">animations动画</a>
        </div>
        <h2>布局相关样式</h2>
        <div class="subMenu">
            <a href="../08layout/01multicolumnLayout.html">多列布局</a>
            <a href="../08layout/02boxLayout.html">盒布局</a>
            <a href="../08layout/03flexBox.html">弹性盒布局1</a>
            <a href="../08layout/04flexBox2.html">弹性盒布局2</a>
            <a href="../08layout/05flexBox3.html">弹性盒布局3</a>
            <a href="../08layout/06flexBox4(lineAlign).html">弹性盒布局4</a>
            <a href="../08layout/07calc.html">calc计算方法</a>
        </div>
        <h2>媒体查询相关样式</h2>
        <div class="subMenu">
            <a href="../09mediaQueries/01chooseDifferentStyleAccordingToWindowWidth.html">根据不同浏览器宽度选择样式</a>
        </div>
        <h2>CSS3其他重要样式和属性</h2>
        <div class="subMenu">
            <a href="../10others/01color.html">颜色相关样式</a>
            <a href="../10others/02UserInterfaceStyleAndinitial.html">用户界面相关样式和initial</a>
            <a href="../10others/03FilterEffects.html">图像滤镜效果</a>
        </div>
        <h2>综合练习</h2>
        <div class="subMenu">
            <a href="../11syntheticInstance/01aHomePageLayout/index.html">某网站首页</a>
            <a href="../11syntheticInstance/02TheOrderLayout/index.html">某订单界面</a>
        </div>
    </section>
</div>
<script>
    $(function () {
        var $menu = $("#menu");
        $menu.find("a").hide();
        $menu.find("h2").hover(function () {
//            $(this).next().find("a").show()
//                .parent().siblings().css("color","red");
            $(this).siblings().find("a").show()
                .end().next().find("a").hide();
        })
    })
</script>

</body>
</html>